<template>
  <div class="box">
    <van-pull-refresh v-model="refreshloading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul>
          <li v-for="item in num" :key="item">{{ item }}</li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
      refreshloading: false, // 下拉刷新的laoding
      loading: false, // 加载laoding 默认也是false
      finished: false, //是否还有数据 总有60条数据
      isRefresh: false,
    };
  },
  methods: {
    getData() {
      setTimeout(() => {
        if (this.isRefresh) {
          // 是下拉刷新
          this.num = 10;
          // 每次下拉刷新收都要回到最初的起点
          this.finished = false;
        } else {
          this.num += 10;
        }
        this.isRefresh = false;
        this.loading = false;
        if (this.num >= 60) {
          this.finished = true;
        }
      }, 2000);
    },
    onRefresh() {
      console.log("下拉了");
      this.isRefresh = true;
      this.getData();
      // 下拉刷新完成后 手动开启上拉加载的检测
      this.loading = true;
      this.refreshloading = false;
    },
    onLoad() {
      console.log("加载新数据");
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.box {
  color: #fff;
  height: 500px;
  background: pink;
  overflow: scroll;
  li {
    height: 30px;
  }
}
</style>
